<template>
  <navbar>
    <template #tab-left>
      <div class="back" @click="backclick">
        <img src="@/assets/img/common/back.svg" alt="" />
      </div>
    </template>
    <template #tab-center>
      <div class="detail-center">
        <div
          v-for="(item, index) in titles"
          class="detail-item"
          @click="itemclcik(index)"
          :class="{ ischeck: crruntindex == index }"
        >
          {{ item }}
        </div>
      </div>
    </template>
  </navbar>
</template>

<script>
import navbar from "@/components/common/nav-tab/nav-tab";
export default {
  name: "DetailNavbar",
  data() {
    return {
      titles: ["详情", "参数", "评论", "推荐"],
      crruntindex: 0,
    };
  },
  methods: {
    itemclcik(index) {
      console.log(index, "我执行了");
      this.crruntindex = index;
      this.$emit("titleclick", index);
      console.log(index);
      // this.crruntindex = index;
    },
    backclick() {
      this.$router.back();
    },
  },
  components: {
    navbar,
  },
};
</script>

<style  scoped>
.ischeck {
  color: var(--color-high-text);
}
.detail-center {
  display: flex;
  font-size: 14px;
}
.detail-item {
  flex: 1;
}
.back img {
  vertical-align: middle;
}
</style>
